<template>
    <div class="cart">
        <div class="page-header">
        <h1>购物车</h1>
            </div>
             <table class="table">
                <tr>
                <th><label><input type="checkbox" @click="check_all" :checked="check_goods.length == cart_list.length"/>全选</label></th>
                    
                </tr>
                <tr v-for="(cart,index) in cart_list" :key="index" class="gods">
                    <td><input type="checkbox" :value="cart" v-model="check_goods" /></td>
                    <td>{{cart.goods_name}}</td>
                    <td class="price">￥{{cart.goods_price}}</td>
                    <td class="col-xs-3">
                        <span class="btn btn-default" v-on:click="reduce(cart)">-</span>
                        <input class="btn-group" type="number" v-model="cart.num" />
                        <span class="btn btn-default" v-on:click="add_num(cart)">+</span>
                    </td>
                    <td>
                        <i class="btn btn-danger" v-on:click="delete_num(cart)"><van-icon name="delete-o" /></i>
                    </td>
                </tr>
            </table>
            <div class="total">
                总计：共 {{cart_list.length    }}件商品，已选择 {{total_num}} 件
                <div class="pull-right">
                    <span class="hj">合计：￥</span><span class="pricee">{{total_price}}</span>
                    <button class="btn btn-success" :disabled="check_goods.length <= 0">去结算</button>
                </div>
            </div>
        <Tabbar></Tabbar>
        </div>
</template>
<script>
import Vue from 'vue';
import { Icon } from 'vant';

Vue.use(Icon);
import Tabbar from '../components/common/Tabbar.vue'
export default {
	
    name:"Cart",
     components:{
       Tabbar
   },
   data() {
	return {
		cart_list: [{
			// imgUrl:'./images/icons1.png',
		　　goods_name: '猫砂盆',
		　　goods_price: '16.9',
		　　num: '2',
		},{
		   goods_name: '宜家家用桌子',
		   goods_price: '69',
		   num: '1',
		},{
		   goods_name: '好利来半熟芝士',
		   goods_price: '78',
		   num: '1',
		}],
		   check_goods: [] //已选择的商品
	      }
	},
    computed: {
//				总价
				total_price() {
					let price = 0
　　　　　　　　　　　　　　　　　　　　　　　　
					this.check_goods.forEach(item => {
//						总价 = 价格 * 数量
						price += Number(item.goods_price) * Number(item.num)
					})
					// console.log(price)
					return price
				},
//				数量
				total_num() {
					let t_num = 0;
					this.check_goods.forEach(item => {
						t_num += Number(item.num);
					})
					// console.log(t_num)
					return t_num
					
				}
			},
            methods:{
//				商品类减减
				reduce(cart) {
					if(cart.num <=0) {
						cart.num = 0
					} else {
						cart.num --
					}
				},
//				商品累加
				add_num(cart) {
					cart.num++
					
				},
//				删除商品
				delete_num(cart){
					this.check_goods.splice(this.check_goods.indexOf(cart),1)
					this.cart_list.splice(this.cart_list.indexOf(cart),1)
				},
//				全选
				check_all() {
					if (this.check_goods.length >0) {
						this.check_goods = []
					} else {
						this.cart_list.forEach(item => {
							this.check_goods.push(item)
						})
					}
				}
			}
   
};
    
    

</script>
<style scoped>
.page-header{
position: fixed;
top: 0;
  z-index: 1;
  display: flex;
  background-color: rgb(053, 103, 083);
  width: 100%;
  height:43px;
  
    
}
.page-header h1{
     margin-left: 5px;
  color: rgb(198, 177, 145);
}
.table
{
    margin-top: 43px;
}
/* .col-xs-3{
	
} */

.col-xs-3 span{
    width:15px;
    height: 10px;
	text-align: center;
    font-size: 15px;
	border: 1px solid rgb(5, 5, 5);
    
}
.btn-group{
    width: 15px;
}
.total{
	position: absolute;
	bottom: 60px;
}
.pull-right{
	width: 100vw;
	height: 66px;
	border:1px solid rgb(212, 202, 169);
	
	
	
}
.hj{
	margin-left: 15px;
	font-size: 14px;
	color: rgb(99, 96, 92);
}
.pricee{
	font-size: 30px;
	color: rgb(255, 141, 48); 
}
.pull-right button{
	position: absolute;
	right: 8px;
	bottom: 20px;
	width: 100px;
	height: 35px;
	border-radius: 12px;
	font-size: 18px;
	color: rgb(67, 61, 52);
	font-weight:bold ;
	

}
.gods{
	width: 100%;
	justify-content: space-between;
	font-size: 15px;
	height: 60px;
}
.price{
	color: rgb(253, 119, 41);
	font-size: 15px;
}
</style>